import { Button, CountDown, Form, Input, Toast } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { getCodeApi, loginApi } from "../../servers/servers";
import { useRef } from "react";
import { useEffect } from "react";

const LoginPage = () => {
  const [phone, setPhone] = useState("");

  const [show, SetShow] = useState(false);
  const [toastMsg, SetToastMsg] = useState("");

  const [form] = Form.useForm();

  // 是否已经发送倒计时
  const [isSendCode, setIsSendCode] = useState(false);

  return (
    <View>
      <Form
        form={form}
        labelPosition="right"
        footer={
          <>
            <Button formType="submit" block size="large" type="primary">
              登录
            </Button>
          </>
        }
        onFinish={async (values) => {
          try {
            const _res = await loginApi({
              ...values,
            });

            SetToastMsg("登录成功");
            SetShow(true);

            Taro.setStorageSync("token", _res.data.token);

            Taro.switchTab({
              url: `/pages/index/index`,
            });
          } catch (error) {}
        }}
      >
        <Form.Item
          rules={[{ required: true, message: "请输入手机号" }]}
          label="手机号"
          name="mobile"
        >
          <Input
            className="nut-input-text"
            placeholder="手机号"
            type="text"
            onChange={(val) => {
              setPhone(val);
            }}
          />
        </Form.Item>

        <Form.Item
          rules={[{ required: true, message: "请输入密码" }]}
          label="密码"
          name="password"
        >
          <Input
            className="nut-input-text"
            placeholder="请输入密码"
            type="password"
          />
        </Form.Item>

        <Form.Item label="验证码" name="code">
          <div
            style={{
              display: "flex",
              alignItems: "center",
              background: "#fff",
              padding: "0 10px",
            }}
          >
            <Input
              placeholder="短信验证码"
              onChange={(code) => {
                form.setFieldsValue({
                  code: code,
                });
              }}
            />
            <div
              className="right"
              style={{ display: "flex", alignItems: "center" }}
            >
              {isSendCode ? (
                <Button type="primary" size="small" disabled>
                  <CountDown
                    style={{
                      color: "white",
                    }}
                    format="ss 秒"
                    remainingTime={60000}
                    onEnd={() => {
                      setIsSendCode(false);
                    }}
                  />
                </Button>
              ) : (
                <Button
                  type="primary"
                  size="small"
                  onClick={async () => {
                    try {
                      try {
                        const { data } = await getCodeApi(phone);

                        SetToastMsg(data);
                        SetShow(true);
                        setIsSendCode(true);
                      } catch (error) {}
                    } catch (error) {}
                  }}
                >
                  获取验证码
                </Button>
              )}
            </div>
          </div>
        </Form.Item>

        <Toast
          type="text"
          visible={show}
          content={toastMsg}
          onClose={() => {
            SetShow(false);
          }}
        />
      </Form>

      <div
        style={{
          display: "flex",
          justifyContent: "space-around",
        }}
      >
        {/* <Radio
          // checked={isRemember}
          // onChange={(checked) => {
          //   setIsRemember(checked);
          // }}
        >
          记住密码
        </Radio> */}
        <a
          href=""
          style={{
            color: "rgba(10, 101, 208, 0.75)",
            fontSize: 12,
          }}
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/login/register/index`,
            });
          }}
        >
          注册
        </a>
      </div>
    </View>
  );
};

export default LoginPage;
